<template>
  <div>
    <div class="top-div">
      <h1>企业级办公系统</h1>
      <p class="userInfo-p">欢迎你，{{userInfo.userName}}</p>
    </div>
    <div class="left-div">
      <ul>
        <li v-for="menu in menuList">
          <p @click="subMenu" style="font-weight: bold;margin: 0">{{menu.displayName}}</p >
          <ul>
            <li @click="router.push(child.nodeURL)" v-for="child in menu.childList">{{child.displayName}}</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="right-div">
<!--        路由显示标签-->
        <router-view></router-view>
    </div>
  </div>

</template>

<script setup>

    import {ref} from "vue";
    import router from "@/router/index.js";
    import api from "@/router/axios.js";


    // 当前用户
    let userInfo = ref({});
    selLoginUserInfo();
    function selLoginUserInfo(){
      api({url:"/selLoginUserInfo"}).then(resp => {
          console.log(resp.data)
        if (resp.data==""){
          router.push("/login")
        }else{
          userInfo.value = resp.data
        }
        userInfo.value = resp.data;
      })
    }

    let menuList = ref();
    selSysFunByRoleId();
    function selSysFunByRoleId(){
      api({url:"/selSysFunByRoleId",method:"post"}).then(resp=>{
        // 将后端返回的数据赋值给vue
        menuList.value= resp.data;
        console.log(resp.data)
      })
    }


    // 二级菜单显示隐藏
    function subMenu(event){
      // ‘event’ 是DOM 原生事件 event.target 触发事件的标签
      //获取触发事件的同级别标签
      let ul = event.target.nextElementSibling;
      if (ul.style.display=="none"){
        ul.style.display="block";
      }else{
        ul.style.display="none";
      }

    }
</script>

<style scoped>
*{list-style: none}
  .top-div, .left-div, .right-div{
    border: 1px solid red;
    padding-left: 40px;
  }

  .top-div{
    width: 1200px;
  }

  .userInfo-p{
      position: fixed;
      top: 5px;
      left: 80%;

  }

  .right-div{
    float: left;
    width: 79%;
  }
  .left-div{
    float: left;
    width: 20%;
  }

  ul li:hover{
    cursor:pointer;
  }


</style>